<template>
  <el-form
    ref="formInline"
    :inline="true"
    :model="formInline"
    class="el-form-inline-informationForm">
    <el-form-item
      label="医院名称"
      prop="name">
      <el-input
        v-model="form.name"
        placeholder="请输入"/>
    </el-form-item>
    <el-form-item
      label="医院简称"
      prop="introduce">
      <el-input
        v-model="form.introduce"
        placeholder="请输入"/>
    </el-form-item>
    <el-form-item
      label="认证"
      prop="auth">
      <el-select
        v-model="form.auth"
        placeholder="请选择">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value"/>
      </el-select>
    </el-form-item>

    <el-form-item class="searchButtonList">
      <el-button
        class="submit"
        @click="search">查询</el-button>
      <el-button
        class="reset"
        @click="reset">重置</el-button>
    </el-form-item>
  </el-form>
</template>

<script>
export default {
  name: 'SearchForm',
  data () {
    return {
      form: {
        name: '',
        introduce: '',
        auth: ''
      },
      options: [{
        value: '1',
        label: '待审核'
      }, {
        value: '2',
        label: '已驳回'
      }, {
        value: '3',
        label: '通过'
      }],
      value: ''
    }
  },
  methods: {
    search () {
      this.$emit('search')
      console.log('查询')
    },
    reset () {
      this.$refs['formInline'].resetFields()
    }
  }
}
</script>

<style lang="less">
.el-form-inline-informationForm {
  .searchButtonList button {
    width: 74px;
    height: 34px;
    cursor: pointer;
    margin-left: 10px;
  }

  .submit {
    background: rgba(35, 113, 197, 1);
    border: 0;
    color: #fff;
  }

  .reset {
    background: rgba(255, 255, 255, 1);
    border: 1px solid rgba(221, 223, 225, 1);
  }
}

</style>
